@import "mixin";

@mixin title() {
  padding-left: rem(4px);
  border-left: rem(3px) solid #dc3838;
  font-size: rem(16px);
  color: #333333;
}

@mixin confirm-btn {
  width: rem(345px);
  height: rem(49px);
  line-height: rem(49px);
  text-align: center;
  border-radius: rem(4px);
  background-color: #dc3838;
  font-size: rem(18px);
  color: #ffffff;
}

.content-top {
  padding: rem(20px) rem(16px) 0;
  width: 100%;
  height: rem(180px);
  background-color: #fff;
  >h3 {
    @include title;
  }
  >.text {
    margin: rem(5px) 0;
    text-indent: rem(26px);
    line-height: rem(25px);
    font-size: rem(13px);
    color: #333333;
  }
  >.contact-us {
    font-size: 0;
    >p {
      line-height: rem(25px);
      font-size: rem(13px);
      color: #333333;
    }
  }
}

.content-middle {
  .form {
    margin: rem(20px) 0 0 0;
    @include border-top-1px(#e5e5e5);
    >.form-group {
      display: flex;
      padding: 0 rem(16px);
      width: 100%;
      height: rem(43px);
      line-height: rem(43px);
      background-color: #fff;
      @include border-bottom-1px(#e5e5e5);
      font-size: 0;
      >.left {
        float: left;
        display: inline-block;
        flex:  0 0 rem(85px);
        width: rem(85px);
        height: 100%;
        >span {
          font-size: rem(16px);
          color: #999999;
        }
      }
      >.right {
        flex: 1;
        float: right;
        display: inline-block;
        height: 100%;
        >input {
          flex: 1;
          width: 100%;
          height: 100%;
          font-size: rem(16px);
          color: #999999;
        }
      }
    }
  }
}

.content-bottom {
  padding: rem(10px) rem(16px);
  width: 100%;
  font-size: 0;
  >label {
    font-size: 0;
    >span {
      margin-right: rem(2px);
      display: inline-block;
      vertical-align: sub;
      width: rem(12px);
      height: rem(12px);
      box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0px -15px 10px -12px rgba(0,0,0,0.1);
    }
    >input {
      vertical-align: middle;
    }
    input[type="checkbox"] {
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      appearance: none;
    }
    input[type="checkbox"]:checked + span {
      @include bg-image('../images/icon-checked');
    }
    >.agreement {
      margin-bottom: rem(35px);
      display: inline-block;
      font-size: rem(12px);
      color: #999999;
      >a {
        color: #dc3838;
      }
    }
  }
  .btn-wrapper {
    text-align: center;
    font-size: 0;
    >a {
      display: inline-block;
      @include confirm-btn
    }
    >p {
      margin-top: rem(20px);
      font-size: rem(13px);
      color: #333333;
    }
  }
}
